<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 图标 -->
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <!-- 引入swiper轮播插件 -->
    <script src="./js/swiper.min.js"></script>
    <link rel="stylesheet" href="./css/swiper.min.css">

    <!-- 响应式 -->
    <!-- 电脑显示 -->
    <link rel="stylesheet" href="./css/index.css" media="(min-width:1200px)">
    <!-- 平板电脑下显示 -->
    <link rel="stylesheet" href="./css/tabletpc.css" media="(min-width:980px) and (max-width:1199px)">
    <!-- 大型屏幕下显示 -->
    <link rel="stylesheet" href="./css/big.css" media="(min-width:768px) and (max-width:979px)">
    <!-- 中型屏幕下显示 -->
    <link rel="stylesheet" href="./css/small.css" media="(min-width:480px) and (max-width:767px)">
    <!-- 小形屏幕下显示 -->
    <link rel="stylesheet" href="./css/min.css" media="(max-width:479px)">
    <title>炫酷人物</title>
</head>
<body>
    <!-- header开始 -->
    <header>
        <div class="top-header w">
            <div class="user">
               <a href="javascript:;"> <img src="./icon/user.png" alt="">Register/Sign in</a>
            </div>
            <div class="header-logo">
                <a href="javascript:;">
                    <img src="./images/header-logo.png" alt="">
                </a>
            </div>
        </div>
        <!-- logo部分 -->
        <div class="logo-nav w">
                <div class="logo">
                    <a href="javascript:;">  <img src="./images/restart_logo.png" alt=""> {re} <strong>start</strong></a>
                    <p>a clean & multipurpose template</p>
                </div>
                <nav>
                    <div class="nav">
                        <ul>
                            <li><a href="javascript:;">HOME</a></li>
                            <li><a href="javascript:;">ABOUTUS</a></li>
                            <li><a href="javascript:;">SERVICES</a></li>
                            <li><a href="javascript:;">PORTFOLIO</a></li>
                            <li><a href="javascript:;">BLOG</a></li>
                            <li><a href="javascript:;">CONTACT</a></li>
                                <div id="flex_container">
                                    <div id="flex_item">PAGES<img src="./images/icon_arrow_down.png" alt="">
                                        <li><a href="javascript:;">HOME ALTERNATIVE</a></li>
                                        <li><a href="javascript:;">PAGE ALTERNATIVE</a></li>
                                        <li><a href="javascript:;">PORIFOLIO MASONRY</a></li> 
                                        <li><a href="javascript:;">PORIFOLIO ITEM</a></li>
                                        <li><a href="javascript:;">PORIFOLIO ITEM II</a></li>
                                        <li><a href="javascript:;">SINGLE POST</a></li>
                                        <li><a href="javascript:;">ERROR 404</a></li>
                                        <li><a href="javascript:;">REGISTER OR SIGN IN</a> </li>
                                    </div>
                                </div>
                                
                        </ul>
                    </div>
                    <div class="menu">
                        <img src="./images/icon-san.png" alt="">    menu
                    </div>
            </div>
        </nav>
    </header>
    <!-- header结束 -->
    <!-- main开始 -->
    <main>
        <!-- 轮播 -->
        <div class="luenbo">
            <!-- swiper插件 -->
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">  <img src="images/banner (1).jpg" alt="First slide"></div>
                    <div class="swiper-slide">  <img src="images/banner (2).jpg" alt="First slide"></div>
                    <div class="swiper-slide">  <img src="images/banner (3).jpg" alt="First slide"></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                
            </div>
            <div class="ad w">
                <div class="ad1">
                    <h3>a flexible theme <br> you can trust & build upon !</h3>
                    <div class="new">
                        <h4>NEW</h4>
                        <p>version <br> <strong>1.1</strong></p>
                    </div>
                    <p class="ad2">{re}start is based on good typography and large photography, serving as a foundation for your creative <br>
                        projects. Feel free to brpwse its templates and discover its features.
                    </p>

            </div>
            </div>
           
        </div>

    </main>
    <!-- main结束 -->
    <!-- topic 开始 -->
    <div class="topic w">
            <h1>focus on what’s importan</h1>
            <h2>and make the web a little bit prettier</h2>
            <a href="javascript:;">Buy this theme!</a>
    </div>
    <!-- topic 结束 -->
    <!-- joinus 开始 -->
    <div class="joinus w">
        <div class="hot">
            <li>
                <a href="javascript:;">
                    <img src="./images/responsive.png" alt="">
                </a>
                <h4>Clean,Responsive Design</h4>
                <br>
                <p>A multipurpose but mainly <strong>business oriented</strong> design, built <br> to serve as a foundation for your web projects. <br> Suspendisse nec risus fermentum sapien congue <br> fermentum sed at lorem.  </p>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/git.png" alt="">
                </a>
                <h4>Based on Twitter Bootstrap</h4>
                <br>
                <p>The front-end development framework with a <strong>steep</strong>  <br><strong>learning curce.</strong>lt changes the way you develop sites.<br>  Suspendisse nec risus fermentum sapien congue <br> fermentum sed at Lorem </p>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="./images/less.png" alt="">
                </a>
                <h4>Makes real use of {LESS}</h4>
                <br>
                <p>{re}<strong>start</strong> comes with a style.less file that tries to use all the  <br>power of <strong>{less} and bootstrap combined.</strong> Suspendisse <br> nec risus fermentum sapien congue fermentum sed at<br> lorem.</p>
            </li>
        </div>
    </div>
    <!-- joinus 结束 -->
    <!-- status 部分 -->
    <div class="status w">
        <h4>Recent Work or Projects form Portfollo</h4>
        <hr style='background-color:rgb(177, 177, 177); height:1px; border:none;''>
    </div>
        <div class="title w">
            <div class="banner">
                <li class="zezhao">
                    <a href="javscript:;">
                        <div class="mask"><img src="./images/share.png" alt="" class="share"></div>
                    </a>
                    <img src="./images/portfolio/a (1).jpg" alt="">
                    <h5><strong>Lorem lpsum</strong></h5>
                    <p>artists</p>
                </li>
                <li class="zezhao">
                    <a href="javascript:;">
                        <div class="mask"><img src="./images/share.png" alt="" class="share"></div>
                    </a>
                    <img src="./images/portfolio/a (2).jpg" alt="">
                    <h5><strong>Loem lpsum</strong></h5>
                    <p>travel</p>
                 
                    
                </li>
                <li class="zezhao">
                    <a href="javascript:;">
                        <div class="mask"><img src="./images/share.png" alt="" class="share"></div>
                    </a>
                    <img src="./images/portfolio/a (3).jpg" alt="">
                    <h5><strong> Lorem lpsum</strong></h5>
                    <p>people</p>
                </li>
                <li class="zezhao">
                    <a href="javscript:;">
                        <div class="mask"><img src="./images/share.png" alt="" class="share"></div>
                    </a>
                    <img src="./images/portfolio/a (4).jpg" alt="">
                    <h5><strong> LOrem lpsum</strong></h5>
                    <p>poetic</p>
                </li>
            </div>
        </div>
        <!-- footer开始 -->
            <div class="footer">
                    <div class="box w">
                        <div class="footer-top">
                            <img src="./images/2022-05-11_211836.png" alt="">
                            <p>Wordle creates Typographic images from any txt or even your delicious bookmarks. Here is my untitled from Anonymous</p><br> <a href="javascript:;">http://unhub.com/Llot</a>
                            <div class="riqi">
                                <p>--LeonArt(@leonartgr) </p>  <span>January 25, 2013</span>
                            </div>
                        </div>
                        <div class="help">
                            <div class="mod_help">
                                <h4>About us</h4>
                                <ul>
                                    <li>Fugiat dapibus,tellus ac cursus commodo,mauesris condime<br>ntum nibh,ut fermentum mas justo sitters.</li>
                                    <li><img src="./icon/map-marker.png" alt=""> 3 Athens street</li>
                                    <li><img src="./icon/phone.png" alt="">(+30) 265-9987</li>
                                    <li><img src="./icon/print.png" alt="">(+30) 9854-7855</li>
                                    <li><img src="./icon/envelope.png" alt="" class="youjian">hello@resartteme.com</li>
                                </ul>
                            </div>
                            <div class="mod_help">
                                <h4>Latest News</h4>
                                <ul>
                                    <li class="jiada"><p class="feb">19 <br>FEB</p> <strong class="bianse" style="font-weight: normal;">Media heading, this is a title of a news...</strong><br>Fugiat dapibus, tellus ac cursus commodo, ut <br> fermentum...</li>
                                    <li class="jiada"><p class="feb">18 <br>FEB</p> <strong class="bianse" style="font-weight: normal;">Media heading, this is a title of a news...</strong><br>Fugiat dapibus, tellus ac cursus commodo, ut <br> fermentum...</li>
                                </ul>
                            </div>
                            <div class="mod_help">
                                <h4>FlickrFeed</h4>
                                <ul>
                                    <li>All photos © by <strong class="bianse" style="font-weight: normal;">Dimitra Giannouka</strong>.</li>
                                </ul>
                            </div>
                        </div>
                      
                    </div>
                      
          </div>
          <!-- copyright开始 -->
            <div class="copyright">
                <div class="banquan w">
                    <p>Copyright © 2014 Company name All rights ressrved </p> <a href="javascript:;"> 网页模板</a> 
                    <h5>chinaZ</h5>
                    </div>
                </div>
             
               
            </div>
        <!-- copyright结束 -->

        <!-- footer结束 -->
        
</body>
<script>        
    var mySwiper = new Swiper ('.swiper', {
      loop: true, // 循环模式选项
      
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      
      // 如果需要滚动条
    })        
    </script>
</html>